<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/memberbg2.jpg" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack"  title="档案详情">
				<view slot="center" class="navTitle">
					档案详情 
				</view>
			</u-navbar>
			<view class="exchange" v-if="info">
				<view class="cl">
					<view class="ava">
						<image :src="info.avantar" mode="aspectFit"></image>
					</view>
					<view class="cname">
						{{info.name}}
					</view>
				</view>
				<view class="cr" @tap="show=true">
					<view class="ico">
						<image src="@/static/images/icon-exchange.svg" mode="aspectFit"></image>
					</view>
					<view class="cp">
						切换学生
					</view>
				</view>
			</view>
			<view class="pd30">
				<view class="filterBlock">
					<view class="block">
						<view class="full">
							<DateRange @change="dateRangeChange"></DateRange>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true"  @scroll="updateScroll" :scroll-top="scrollTop" class="scrollView pt30">
				<view class="pd30">
					<view class="archivesDetail" v-if="info">
						<view class="item" v-for="(i,index) in info.list">
							<view class="idate">
								{{i.date|dateFormate('YYYY-MM-DD hh:mm')}}
							</view>
							<view class="box1 box" v-if="i.type==0">
								<view class="bt">
									{{i.title}}
								</view>
								<view class="ul">
									<view class="li">
										<view class="ll">
											访谈时间
										</view>
										<view class="lr">
											{{i.InterviewTime}}
										</view>
									</view>
									<view class="li">
										<view class="ll">
											负责教师
										</view>
										<view class="lr">
											{{i.InterviewTeacher}}
										</view>
									</view>
								</view>
								<view class="btns">
									<view class="btn" @tap="viewCommunicateDetail(i.id)">
										查看详情
									</view>
								</view>
							</view>
							<view class="box2 box" v-if="i.type==1">
								<view class="bl">
									<view class="bt">
										{{i.title}}
									</view>
									<view class="btns">
										<view class="btn" @tap="viewTestComplete(i.id)">
											查看详情
										</view>
									</view>
								</view>
								<view class="br">
									<view class="stageTag" :style="'color:'+stageOption(i.stage).color+';background:'+stageOption(i.stage).bgColor">
										{{stageOption(i.stage).label}}
									</view>
								</view>
							</view>
							<view class="box3 box" v-if="i.type==2">
								<view class="bl">
									{{i.title}}
								</view>
								<view class="br">
									<view class="stageTag2" :style="'color:'+stageOption(i.stage).color+';background:'+stageOption(i.stage).bgColor">
										{{stageOption(i.stage).label}}
									</view>
								</view>
							</view>
							<view class="box3 box" v-if="i.type==3">
								<view class="bl">
									{{i.title}}
								</view>
								<view class="br btns">
									<view class="btn" @tap="viewInterveneDetail(i.id)">
										查看详情
									</view>
								</view>
							</view>
						</view>
					</view>
					<u-overlay :show="isLoading" :opacity="0.2">
						<u-loadmore color="#fff" iconColor="#fff" status="loading" />
					</u-overlay>
				</view>
			</scroll-view>
			<u-popup :show="show" @close="show=false" mode="center" :customStyle="{width:'100%',padding:'30rpx',boxSizing:'border-box',background:'none'}">
				<view class="taskPop">
					<view class="tit">
						切换学生
					</view>
					<view class="mls" v-if="memberOptions&&memberOptions.length>0">
						<view class="li" v-for="(i,index) in memberOptions" :key="index" :class="i.id==selectedMemberId?'on':''" @tap="selectedMemberId=i.id">
							<view class="ava">
								<image :src="i.avantar" mode="aspectFit"></image>
							</view>
							<view class="lr">{{i.name}}</view>
						</view>
					</view>
					<view class="ft">
						<view class="btn on" @tap="changeMember">
							确认
						</view>
						<view class="btn" @tap="show=false">
							取消
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		onShow:function(){
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			if(page.options['id']){
				this.$data.itemid = page.options['id'];
			}
		},
		data() {
			return {
				itemid:'',
				oldScrollTop:0,
				scrollTop:0,
				startDate:'',
				endDate:'',
				info:'',
				isLoading:false,
				memberOptions:[],
				selectedMemberId:'',
				show:false
			}
		},
		watch:{
			itemid:function(){
				this.getInfo();
			}
		},
		methods: {
			changeMember(){
				var that=this;
				that.show=false;
				if(that.info.id==that.selectedMemberId){return};
				that.getInfo();
			},
			viewCommunicateDetail(id){//查看心理咨询详情
				uni.navigateTo({
					url:'/subpage/patriarch/archives/consultingDetail?id='+id
				})
			},
			viewTestComplete(id){//查看测评详情
				uni.navigateTo({
					url:'/subpage/viewTest/viewTest?id='+id
				})
			},
			viewInterveneDetail(id){//查看危机干预详情
				uni.navigateTo({
					url:'/subpage/patriarch/intervene/detail?id='+id
				})
			},
			dateRangeChange(e){//日期范围变化
				var that=this;
				that.startDate=e.start;
				that.endDate=e.end;
				that.getInfo();
			},
			updateScroll(e){
				this.oldScrollTop=e.detail.scrollTop;
			},
			getInfo(){
				var that=this;
				if(that.isLoading){return;};
				that.isLoading=true;
				that.scrollTop=that.oldScrollTop;
				that.$nextTick(function() {
					that.scrollTop = 0
				});
				let timer=setTimeout(function(){
					//请求开始
					//type:0访谈记录，1心理测评，2危机评估，3干预措施
					var res={
						id:101,
						avantar:'../../../static/upload/student.png',
						name:'刘美美',
						list:[
							{
								date:'2024/09/11 12:00:00',
								type:0,
								title:'心理咨询访谈记录',
								id:101,
								InterviewTime:'2024/09/08  11:00-12:00',
								InterviewTeacher:'李老师'
							},
							{
								id:101,
								date:'2024/09/08 10:50:00',
								type:1,
								title:'2024新生开学心理测评',
								stage:1
							},
							{
								id:102,
								date:'2024/09/08 08:55:00',
								type:2,
								title:'危机评估等级',
								stage:1
							},
							{
								id:102,
								date:'2024/09/08 08:30:00',
								type:3,
								title:'危机干预措施'
							},
							{
								id:102,
								date:'2024/09/08 16:30:00',
								type:2,
								title:'危机评估等级',
								stage:4
							},
							{
								id:102,
								date:'2024/09/08 14:30:00',
								type:1,
								title:'2024新生开学心理测评',
								stage:4
							}
						]
					};
					that.info=res;
					that.selectedMemberId=res.id;
					that.isLoading=false;
					//end
					clearTimeout(timer);
				},300);
			},
			getMembers(){
				var that=this;
				var res=[
					{
						id:101,
						avantar:'../../../static/upload/student.png',
						name:'刘美美',
						sex:0,
						age:12
					},
					{
						id:103,
						avantar:'../../../static/upload/student2.png',
						name:'刘小聪',
						sex:1,
						age:9
					},
					{
						id:104,
						avantar:'../../../static/upload/student2.png',
						name:'刘小聪',
						sex:1,
						age:9
					},
					{
						id:105,
						avantar:'../../../static/upload/student2.png',
						name:'刘小聪',
						sex:1,
						age:9
					}
				];
				that.memberOptions=res;
			}
		},
		computed:{
			
		},
		mounted(){
			this.getInfo();
			this.getMembers();
		}
	}
</script>

<style lang="scss" scoped>
	.taskPop{
		background: #fff;
		padding: 40rpx 60rpx 10rpx;
		border-radius: 30rpx;
		color: #65554d;
		.tit{
			text-align: center;
			font-size: 40rpx;
			padding-bottom: 40rpx;
		}
		.tit2{
			padding-bottom: 24rpx;
			font-size: 28rpx;
		}
		.mls{
			padding-bottom: 20rpx;
			.li{
				display: flex;
				align-items: center;
				padding: 20rpx 50rpx;
				border-radius: 20rpx;
				background: #f9f6f0;
				margin-bottom: 20rpx;
				border: 2rpx solid #f9f6f0;
				.ava{
					flex: 0 0 auto;
					width: 100rpx;
					height: 100rpx;
					border: 4rpx solid #e6e6e6;
					border-radius: 50%;
					box-sizing: border-box;
					background: #e6e6e6;
					image{
						display: block;
						width: 100%;
						height: 100%;
					}
				}
				.lr{
					flex: 1 1 auto;
					overflow: hidden;
					font-size: 32rpx;
					color: #65554d;
					padding-left: 30rpx;
				}
				&.on{
					border-color: #fe9c29;
					.lr{
						color: #fe9c29;
					}
				}
			}
		}
		.ft{
			display: flex;
			align-items: stretch;
			justify-content: space-between;
			.btn{
				flex: 0 0 auto;
				width: 50%;
				font-size: 28rpx;
				color: #65554d;
				line-height: 100rpx;
				text-align: center;
				&.on{
					color: #fe9c29;
				}
			}
		}
	}
	.exchange{
		padding-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 30rpx;
		padding-left: 30rpx;
		.cl{
			flex: 0 0 auto;
			font-size: 40rpx;
			display: flex;
			align-items: center;
			color: #65554d;
			.ava{
				flex: 0 0 auto;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				background: #fff;
				margin-right: 20rpx;
				image{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}
		.cr{
			flex: 0 0 auto;
			padding: 0 30rpx 0 17rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #e07f82;
			background: linear-gradient(90deg,#ffd0d2,#ffe7e8);
			border-radius: 60rpx 0 0 60rpx;
			.ico{
				flex: 0 0  auto;
				margin-right: 10rpx;
				image{
					display: block;
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}
	.slot-content{
		flex: 0 0 auto;
		width: 100%;
	}
	/deep/.u-popup__content{
		border-radius: 30rpx !important;
		.u-modal__title{
			font-size: 40rpx !important;
			color: #65554d !important;
			padding-top: 40rpx !important;
			line-height: 1;
			font-weight: normal !important;
		}
		.u-modal__content{
			padding: 40rpx 40rpx 0 !important;
		}
		.u-line{
			display: none;
		}
		.u-modal__button-group__wrapper{
			height: 120rpx;
			border-radius: 0 !important;
			.u-modal__button-group__wrapper__text{
				font-size: 28rpx !important;
			}
		}
	}
	.filterBlock{
		padding-top: 20rpx;
		.block{
			.search{
				background: #fff;
				border-color: #fff;
				margin-left: 10rpx;
			}
		}
		.select{
			margin-left: 0;
			width: 280rpx;
			/deep/ .uni-select{
				background: #fff !important;
				border-color: #fff !important;
			}
		}
	}
</style>
